$che-stack-library-workspace-selecter-color = $label-info-color

.che-stack-library-workspace-selecter
  height 150px
  width 180px
  border-color $form-element-border-color
  background-color $background-color
  border-width 2px
  border-style solid
  che-border-radius(3px)
  -webkit-box-shadow 0 1px 1px rgba(0, 0, 0, 0.05)
  box-shadow 0 1px 1px rgba(0, 0, 0, 0.05)
  margin-left 0
  cursor pointer
  margin-right 16px
  color $che-stack-library-workspace-selecter-color

  &:hover
    background-color #EEE


.che-stack-library-workspace-selecter md-card-content
  padding 0


.che-stack-library-workspace-selecter .title
  padding-top 4px
  padding-bottom 3px
  padding-left 10px
  font-size 14px
  text-transform uppercase
  color $label-primary-color

.che-stack-library-workspace-selecter .body
  margin-top 12px
  margin-bottom 8px

.che-stack-library-workspace-selecter .che-stack-library-workspace-selecter-workspace-name
  font-size 12px
  border-top-style solid
  border-bottom-style solid
  border-left-style none
  border-right-style none
  border-bottom-color $form-element-border-color
  border-top-color $form-element-border-color
  border-width 1px
  color $label-primary-color
  padding-left 10px

.che-stack-library-workspace-selecter-workspace-name .chefont
  margin-right 5px
  margin-top 4px
  color $secondary-color

.che-stack-library-workspace-selecter-workspace-stack
  font-size 0.8em
  border-bottom 1px solid $form-element-border-color
  color $label-primary-color
  padding 5px 10px

.che-stack-library-workspace-selecter md-icon
  font-size 60px
  text-align center
  margin-left auto
  margin-right auto
  margin-top 16px
  margin-bottom 0
  padding 0
  height 74px
  width 74px

.che-stack-library-workspace-selecter-active
  border-color $primary-color
  color $primary-color

  &:hover
    color $primary-color
    background-color #EEE

.che-stack-library-workspace-selecter-active:hover .title
  background-color $primary-color
  color $background-color


.che-stack-library-workspace-selecter-active .body
  background-color $primary-color

.che-stack-library-workspace-selecter-active .title
  background-color $primary-color
  color $background-color

.che-stack-library-workspace-selecter-active:hover .body
  background-color $primary-color !important
  color $background-color

.che-stack-library-workspace-selecter-active:hover md-icon
  color $primary-color

.che-stack-library-workspace-selecter-active md-icon
  color $primary-color

.che-stack-library-workspace-selecter:active .body
  display block

che-stack-library-workspace-selecter md-card:focus
  outline none

che-stack-library-workspace-selecter
  outline none

.che-stack-library-workspace-selecter-text
  margin-top 5px
  padding-left 10px
  font-size 12px

.che-stack-library-workspace-selecter-extra-text
  cursor pointer
  margin-right 7px
  margin-bottom 2px
